<template>
  <div :v-loading="loading">
    <el-row>
      <el-col :span="6">
        <div v-for="node in data" :key="node.id" style="margin-top: 10px">
          <el-avatar> {{node.name?node.name.substr(0,1):node.id.substr(0,1)}}</el-avatar>
          <span class="node" @click="editNode(node)"
            :title="node.name?node.name:node.id">{{node.name?node.name:node.id.substr(0,10)}}</span>
        </div>
      </el-col>
      <el-col :span="16">
        <el-form v-loading="loading" :model="dataForm" ref="dataForm"
          :label-width="$i18n.locale === 'en-US' ? '140px' : '160px'">
          <el-form-item prop="name" :label="$t('process.task.name')">
            <span v-if="dataForm.taskDefId">
              <el-tag v-if="dataForm.taskName">{{dataForm.taskName}}</el-tag>----<el-tag>{{dataForm.taskDefId}}</el-tag>
            </span>
          </el-form-item>
          <el-form-item prop="processForm" :label="$t('process.task.processForm')">
            <el-row>
              <el-col :span="6">
                <el-radio-group size="small" v-model="dataForm.processFormFlag">
                  <el-radio-button :label="true">是</el-radio-button>
                  <el-radio-button :label="false">否</el-radio-button>
                </el-radio-group>
              </el-col>
              <el-col :span="16">
                <el-input v-if="dataForm.processFormFlag" :placeholder="$t('process.task.processFormUrl')"
                  v-model="dataForm.processFormUrl"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="dealForm" :label="$t('process.task.dealForm')">
            <el-radio-group size="small" v-model="dataForm.dealFormFlag">
              <el-radio-button :label="true">是</el-radio-button>
              <el-radio-button :label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="taskForm" :label="$t('process.task.taskForm')">
            <el-row>
              <el-col :span="6">
                <el-radio-group size="small" v-model="dataForm.taskFormFlag">
                  <el-radio-button :label="true">是</el-radio-button>
                  <el-radio-button :label="false">否</el-radio-button>
                </el-radio-group>
              </el-col>
              <!-- <el-select v-model="dataForm.type" placeholder="请选择表单类型">
                <el-option v-for="template in this.$getDictList('BPM_FORM_TYPE', false)" :key="template.val"
                  :label="template.label" :value="template.val"></el-option>
              </el-select> -->
              <!--下拉框-->
              <el-select v-if="dataForm.taskFormFlag" v-model="dataForm.taskFormType" placeholder="请选择表单配置">
                <el-option v-for=" item in urlCustomDefTypeList" :key="item.defType" :label="item.defName"
                  :value="item.defType">
                </el-option>
              </el-select>
              <!-- <el-col :span="16">
                <el-input v-if="dataForm.taskFormFlag" :placeholder="$t('process.task.taskFormUrl')" v-model="dataForm.taskFormUrl"></el-input>
              </el-col> -->
            </el-row>
          </el-form-item>
          <!-- <el-form-item v-if="dataForm.taskFormFlag" prop="taskClassName" :label="$t('process.task.taskClassName')">
          </el-form-item> -->
          <!-- <el-form-item v-if="dataForm.taskFormFlag" prop="taskClassName" :label="$t('process.task.taskClassName')">
            <el-row>
              <el-col :span="10">
                <el-input :placeholder="$t('process.task.taskClassName')" v-model="dataForm.taskClassName"></el-input>
              </el-col>
              <el-col :span="10">
                <el-input :placeholder="$t('process.task.taskMethodName')" v-model="dataForm.taskMethodName"></el-input>
              </el-col>
            </el-row>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" size="small" @click="dataFormSubmitHandle()">{{ $t('save') }}</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const _dataForm = {
  id: '',
  processInstId: '',
  taskDefId: '',
  taskName: '',
  relationStr: '',
  formStr: '',
  remark: '',
  creator: '',
  createDate: '',
  updater: '',
  updateDate: '',
  processFormFlag: true,
  processFormUrl: 'default',
  dealFormFlag: true,
  taskFormFlag: false,
  taskFormType: '',
  taskClassName: '',
  taskMethodName: '',
  modelKey: ''
}
export default {
  data () {
    return {
      loading: false,
      id: '',
      data: [],
      modelKey: '',
      urlCustomDefTypeList: [],
      dataForm: {
        ..._dataForm
      }
    }
  },
  methods: {
    init () {
      this.loading = true
      this.dataForm = {
        ..._dataForm
      }
      this.dataForm.modelKey = this.modelKey
      this.clear()
      this.getTree()
      this.getDefTypeList()
    },
    getTree () {
      this.$http.get('/act/process/nodeList/' + this.id).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        if (!res.data || res.data.length <= 0) {
          this.$message.info('没有用户节点信息')
          this.loading = false
          return false
        } else {
          this.data = res.data
        }
        this.loading = false
      }).catch(() => { })
    },
    getDefTypeList () {
      this.$http.get('/bpm/bpmTaskExtUrl/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.urlCustomDefTypeList = res.data
      }).catch(() => { })
      // return this.$http.get(
      //   '/bpm/bpmTaskExtUser/list').then(({ data: res }) => {
      //     if (res.code !== 0) {
      //       return this.$message.error(res.msg)
      //     }
      //     this.userCustomDefTypeList = res.data
      //   }).catch(() => { })
    },
    clear () {
      this.$refs['dataForm'].resetFields()
      this.dataForm.processFormFlag = true
      this.dataForm.dealFormFlag = true
      this.dataForm.taskFormFlag = false
      this.dataForm.taskFormUrl = ''
      this.dataForm.taskClassName = ''
      this.dataForm.taskMethodName = ''
      this.dataForm.taskFormType = ''
      this.dataForm.processFormUrl = 'default'
    },
    editNode (node) {
      this.loading = true
      this.dataForm.processInstId = this.id
      this.dataForm.taskDefId = node.id
      this.dataForm.taskName = node.name
      this.clear()
      this.getTaskFormInfo()
    },
    getTaskFormInfo () {
      this.$http.post('/flowable/bpmTaskExt/getByTaskDefId', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }

        let { taskName, taskDefId, processInstId, modelKey, ..._data } = res.data
        this.dataForm = {
          ...this.dataForm,
          ..._data
        }
        let formData = res.data.formDTO
        if (formData) {
          this.dataForm.processFormFlag = formData.processFormFlag
          this.dataForm.dealFormFlag = formData.dealFormFlag
          this.dataForm.taskFormFlag = formData.taskFormFlag
          this.dataForm.taskFormUrl = formData.taskFormUrl
          this.dataForm.taskClassName = formData.taskClassName
          this.dataForm.taskMethodName = formData.taskMethodName
          this.dataForm.processFormUrl = formData.processFormUrl
          this.dataForm.taskFormType = formData.taskFormType
        }
        this.loading = false
      }).catch(() => { })
    },
    dataFormSubmitHandle () {
      console.log(this.dataForm.taskFormType)
      if (!this.dataForm.taskDefId) {
        return this.$message.error('请先选择节点信息')
      }
      if (this.dataForm.processFormFlag) {
        if (!this.dataForm.processFormUrl) {
          return this.$message.error('申请表单URL不能为空')
        }
      }
      if (this.dataForm.taskFormFlag) {
        if (!this.dataForm.taskFormType) {
          return this.$message.error('节点不能为空')
        }
        // this.dataForm.formDTO = this.dataForm.taskFormType
        // if (!this.dataForm.taskClassName) {
        //   return this.$message.error('节点表单的处理服务类不能为空')
        // }
        // if (!this.dataForm.taskMethodName) {
        //   return this.$message.error('节点表单的处理方法不能为空')
        // }
      }
      this.loading = true
      // 组装数据 关系json串
      let formJson = {}
      formJson.processFormFlag = this.dataForm.processFormFlag
      formJson.processFormUrl = this.dataForm.processFormUrl
      formJson.dealFormFlag = this.dataForm.dealFormFlag
      formJson.taskFormFlag = this.dataForm.taskFormFlag
      formJson.taskFormUrl = this.dataForm.taskFormUrl
      formJson.taskClassName = this.dataForm.taskClassName
      formJson.taskMethodName = this.dataForm.taskMethodName
      formJson.taskFormType = this.dataForm.taskFormType
      this.dataForm.formStr = JSON.stringify(formJson)
      // 保存数据
      this.$http.post('flowable/bpmTaskExt/saveOrUpdateForm', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.loading = false
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
<style>
.node {
  display: inline-block;
  margin-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.el-avatar {
  background: #5cb85c;
}

.el-dialog__body {
  padding: 10px 20px;
}
</style>
